React useSyncExternalStore: Bemästra integrationen av externt state

Reacts useSyncExternalStore-hook, som introducerades i React 18, erbjuder ett kraftfullt och effektivt sätt att integrera externa datakällor och state-hanteringsbibliotek i dina React-komponenter. Denna hook låter komponenter prenumerera på förändringar i externa stores, vilket säkerställer att UI:t alltid återspeglar den senaste datan samtidigt som prestandan optimeras. Denna guide ger en omfattande översikt över useSyncExternalStore, och täcker dess kärnkoncept, användningsmönster och bästa praxis.

Förstå behovet av useSyncExternalStore

I många React-applikationer kommer du att stöta på scenarier där state behöver hanteras utanför komponentträdet. Detta är ofta fallet när man hanterar:

• Tredjepartsbibliotek: Integrering med bibliotek som hanterar sitt eget state (t.ex. en databasanslutning, ett webbläsar-API eller en fysikmotor).
• Delat state över komponenter: Hantera state som behöver delas mellan komponenter som inte är direkt relaterade (t.ex. användarautentiseringsstatus, applikationsinställningar eller en global händelsebuss).
• Externa datakällor: Hämta och visa data från externa API:er eller databaser.

Traditionella state-hanteringslösningar som useState och useReducer är väl lämpade för att hantera lokalt komponent-state. De är dock inte utformade för att hantera externt state effektivt. Att använda dem direkt med externa datakällor kan leda till prestandaproblem, inkonsekventa uppdateringar och komplex kod.

useSyncExternalStore hanterar dessa utmaningar genom att erbjuda ett standardiserat och optimerat sätt att prenumerera på förändringar i externa stores. Det säkerställer att komponenter endast renderas om när relevant data ändras, vilket minimerar onödiga uppdateringar och förbättrar den övergripande prestandan.

Kärnkoncepten i useSyncExternalStore

useSyncExternalStore tar tre argument:

1. subscribe: En funktion som tar en callback som argument och prenumererar på den externa storen. Callbacken kommer att anropas när storens data ändras.
2. getSnapshot: En funktion som returnerar en ögonblicksbild av datan från den externa storen. Denna funktion bör returnera ett stabilt värde som React kan använda för att avgöra om datan har ändrats. Den måste vara ren och snabb.
3. getServerSnapshot (valfri): En funktion som returnerar det initiala värdet för storen under server-side rendering. Detta är avgörande för att säkerställa att den initiala HTML-koden matchar den klient-sidiga renderingen. Det används ENDAST i server-side rendering-miljöer. Om den utelämnas i en klient-sidig miljö, använder den getSnapshot istället. Det är viktigt att detta värde aldrig ändras efter att det initialt har renderats på serversidan.

Här är en genomgång av varje argument:

1. subscribe

subscribe-funktionen ansvarar för att etablera en anslutning mellan React-komponenten och den externa storen. Den tar emot en callback-funktion, som den ska anropa när storens data ändras. Denna callback används vanligtvis för att utlösa en om-rendering av komponenten.

Exempel:

            const subscribe = (callback) => {
  store.addListener(callback);
  return () => {
    store.removeListener(callback);
  };
};
            

              
                Copy
              
            
          

I detta exempel lägger store.addListener till callbacken i storens lista över lyssnare. Funktionen returnerar en rensningsfunktion som tar bort lyssnaren när komponenten avmonteras, vilket förhindrar minnesläckor.

2. getSnapshot

getSnapshot-funktionen ansvarar för att hämta en ögonblicksbild av datan från den externa storen. Denna ögonblicksbild ska vara ett stabilt värde som React kan använda för att avgöra om datan har ändrats. React använder Object.is för att jämföra den nuvarande ögonblicksbilden med den föregående. Därför måste den vara snabb och det rekommenderas starkt att den returnerar ett primitivt värde (sträng, nummer, boolean, null, eller undefined).

Exempel:

            const getSnapshot = () => {
  return store.getData();
};
            

              
                Copy
              
            
          

I detta exempel returnerar store.getData den aktuella datan från storen. React kommer att jämföra detta värde med det föregående värdet för att avgöra om komponenten behöver renderas om.

3. getServerSnapshot (Valfri)

getServerSnapshot-funktionen är endast relevant när server-side rendering (SSR) används. Denna funktion anropas under den initiala server-renderingen, och dess resultat används som det initiala värdet för storen innan hydrering sker på klienten. Att returnera konsekventa värden är avgörande för framgångsrik SSR.

Exempel:

            const getServerSnapshot = () => {
  return store.getInitialDataForServer();
};
            

              
                Copy
              
            
          

I detta exempel returnerar `store.getInitialDataForServer` den initiala datan som är lämplig för server-side rendering.

Grundläggande användningsexempel

Låt oss titta på ett enkelt exempel där vi har en extern store som hanterar en räknare. Vi kan använda useSyncExternalStore för att visa räknarens värde i en React-komponent:

            // Extern store
const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React-komponent
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Räkning: {count}</p>
      <button onClick={increment}>Öka</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

I detta exempel skapar createStore en enkel extern store som hanterar ett räknarvärde. Counter-komponenten använder useSyncExternalStore för att prenumerera på förändringar i storen och visa det aktuella värdet. När man klickar på inkrementeringsknappen uppdaterar setState-funktionen storens värde, vilket utlöser en om-rendering av komponenten.

Integration med State-hanteringsbibliotek

useSyncExternalStore är särskilt användbar för att integrera med state-hanteringsbibliotek som Zustand, Jotai och Recoil. Dessa bibliotek erbjuder sina egna mekanismer för att hantera state, och useSyncExternalStore låter dig sömlöst integrera dem i dina React-komponenter.

Här är ett exempel på integration med Zustand:

            import { useStore } from 'zustand';
import { create } from 'zustand';

// Zustand store
const useBoundStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// React-komponent
function Counter() {
  const count = useStore(useBoundStore, (state) => state.count);
  const increment = useStore(useBoundStore, (state) => state.increment);

  return (
    <div>
      <p>Räkning: {count}</p>
      <button onClick={increment}>Öka</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Zustand förenklar skapandet av en store. Dess interna subscribe- och getSnapshot-implementationer används implicit när du prenumererar på ett visst state.

Här är ett exempel på integration med Jotai:

            import { atom, useAtom } from 'jotai'

// Jotai-atom
const countAtom = atom(0)

// React-komponent
function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Räkning: {count}</p>
      <button onClick={() => setCount(count + 1)}>Öka</button>
    </div>
  )
}

export default Counter;

            

              
                Copy
              
            
          

Jotai använder atomer för att hantera state. useAtom hanterar internt prenumerationen och snapshottingen.

Prestandaoptimering

useSyncExternalStore erbjuder flera mekanismer för att optimera prestandan:

• Selektiva uppdateringar: React renderar endast om komponenten när värdet som returneras av getSnapshot ändras. Detta säkerställer att onödiga om-renderingar undviks.
• Batch-uppdateringar: React samlar uppdateringar från flera externa stores i en enda om-rendering. Detta minskar antalet om-renderingar och förbättrar den övergripande prestandan.
• Undviker inaktuella closures: useSyncExternalStore säkerställer att komponenten alltid har tillgång till den senaste datan från den externa storen, även när man hanterar asynkrona uppdateringar.

För att ytterligare optimera prestandan, överväg följande bästa praxis:

• Minimera mängden data som returneras av getSnapshot: Returnera endast den data som faktiskt behövs av komponenten. Detta minskar mängden data som behöver jämföras och förbättrar effektiviteten i uppdateringsprocessen.
• Använd memoization-tekniker: Memoize-resultaten av dyra beräkningar eller datatransformationer. Detta kan förhindra onödiga omberäkningar och förbättra prestandan.
• Undvik onödiga prenumerationer: Prenumerera endast på den externa storen när komponenten faktiskt är synlig. Detta kan minska antalet aktiva prenumerationer och förbättra den övergripande prestandan.
• Säkerställ att getSnapshot returnerar ett nytt *stabilt* objekt endast om datan ändrats: Undvik att skapa nya objekt/arrayer/funktioner om den underliggande datan faktiskt inte har ändrats. Returnera samma objekt med referens om möjligt.

Server-Side Rendering (SSR) med useSyncExternalStore

När man använder useSyncExternalStore med server-side rendering (SSR) är det avgörande att tillhandahålla en getServerSnapshot-funktion. Denna funktion säkerställer att den initiala HTML-koden som renderas på servern matchar den klient-sidiga renderingen, vilket förhindrar hydreringsfel och förbättrar användarupplevelsen.

Här är ett exempel på hur man använder getServerSnapshot:

            const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const getServerSnapshot = () => initialValue; // Viktigt för SSR

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    getServerSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React-komponent
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Räkning: {count}</p>
      <button onClick={increment}>Öka</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

I detta exempel returnerar getServerSnapshot det initiala värdet för räknaren. Detta säkerställer att den initiala HTML-koden som renderas på servern matchar den klient-sidiga renderingen. getServerSnapshot bör returnera ett stabilt och förutsägbart värde. Den bör också utföra samma logik som getSnapshot-funktionen på servern. Undvik att komma åt webbläsarspecifika API:er eller globala variabler i getServerSnapshot.

Avancerade användningsmönster

useSyncExternalStore kan användas i en mängd avancerade scenarier, inklusive:

• Integration med webbläsar-API:er: Prenumerera på förändringar i webbläsar-API:er som localStorage eller navigator.onLine.
• Skapa anpassade hooks: Kapsla in logiken för att prenumerera på en extern store i en anpassad hook.
• Använda med Context API: Kombinera useSyncExternalStore med Reacts Context API för att tillhandahålla delat state till ett komponentträd.

Låt oss titta på ett exempel där vi skapar en anpassad hook för att prenumerera på localStorage:

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, initialValue) {
  const getSnapshot = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Fel vid hämtning av värde från localStorage:", error);
      return initialValue;
    }
  };

  const subscribe = (callback) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const setItem = (value) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
      window.dispatchEvent(new Event('storage')); // Utlös manuellt lagringshändelse för uppdateringar på samma sida
    } catch (error) {
      console.error("Fel vid inställning av värde i localStorage:", error);
    }
  };

  const serverSnapshot = () => initialValue;

  const storedValue = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return [storedValue, setItem];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

I detta exempel är useLocalStorage en anpassad hook som prenumererar på förändringar i localStorage. Den använder useSyncExternalStore för att hantera prenumerationen och hämta det aktuella värdet från localStorage. Den skickar också korrekt ett lagringshändelse (storage event) för att säkerställa att uppdateringar på samma sida återspeglas (eftersom `storage`-händelser endast utlöses i andra flikar). serverSnapshot säkerställer att initiala värden tillhandahålls korrekt i servermiljöer.

Bästa praxis och vanliga fallgropar

Här är några bästa praxis och vanliga fallgropar att undvika när du använder useSyncExternalStore:

• Undvik att mutera den externa storen direkt: Använd alltid storens API för att uppdatera datan. Att mutera storen direkt kan leda till inkonsekventa uppdateringar och oväntat beteende.
• Säkerställ att getSnapshot är ren och snabb: getSnapshot bör inte ha några sidoeffekter och ska returnera ett stabilt värde snabbt. Dyra beräkningar eller datatransformationer bör memoizeras.
• Tillhandahåll en getServerSnapshot-funktion när du använder SSR: Detta är avgörande för att säkerställa att den initiala HTML-koden som renderas på servern matchar den klient-sidiga renderingen.
• Hantera fel på ett elegant sätt: Använd try-catch-block för att hantera potentiella fel när du ansluter till den externa storen.
• Städa upp prenumerationer: Avsluta alltid prenumerationen på den externa storen när komponenten avmonteras för att förhindra minnesläckor. subscribe-funktionen bör returnera en rensningsfunktion som tar bort lyssnaren.
• Förstå prestandakonsekvenserna: Även om useSyncExternalStore är optimerad för prestanda, är det viktigt att förstå den potentiella inverkan av att prenumerera på externa stores. Minimera mängden data som returneras av getSnapshot och undvik onödiga prenumerationer.
• Testa noggrant: Säkerställ att integrationen med storen fungerar korrekt i olika scenarier, särskilt vid server-side rendering och i concurrent mode.

Slutsats

useSyncExternalStore är en kraftfull och effektiv hook för att integrera externa datakällor och state-hanteringsbibliotek i dina React-komponenter. Genom att förstå dess kärnkoncept, användningsmönster och bästa praxis kan du effektivt hantera delat state i dina React-applikationer och optimera prestandan. Oavsett om du integrerar med tredjepartsbibliotek, hanterar delat state över komponenter eller hämtar data från externa API:er, erbjuder useSyncExternalStore en standardiserad och pålitlig lösning. Använd den för att bygga mer robusta, underhållbara och prestandastarka React-applikationer för en global publik.

Ytterligare resurser

• React-dokumentation om useSyncExternalStore
• React 18 Pull Request som introducerar useSyncExternalStore
• Zustand State Management Library
• Jotai State Management Library